<template>
  <div class="channel-list">
    <!-- 我的频道 -->
    <van-cell-group>
      <van-cell title="我的频道：点击可输入内容">
        <van-button plain type="info" size="small" @click="edit" v-if="editShow"
          >编辑</van-button
        >
        <van-button
          plain
          type="primary"
          size="small"
          @click="editSuccess"
          v-else
          >完成</van-button
        >
      </van-cell>
    </van-cell-group>
    <van-grid :column-num="4">
      <van-grid-item
        v-for="(item, index) in channels"
        :key="item.id"
        :text="item.name"
      >
        <span
          class="mychannel"
          :class="{ active: index === activeIndex }"
          @click="selectMyChannel(index)"
          >{{ item.name }}</span
        >
        <!-- 右上角图标 -->
        <van-icon
          name="cross"
          v-show="isShow"
          @click="delChannel(index)"
          class="icon"
        />
      </van-grid-item>
    </van-grid>
    <!-- 可选频道 -->
    <div class="select">
      <van-cell-group :border="false">
        <van-cell title="可选频道:" />
      </van-cell-group>
      <van-grid :column-num="4">
        <van-grid-item
          v-for="item in selectChannel"
          :key="item.id"
          :text="item.name"
          @click="addMyChannel(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
// 引入获取全部频道接口,删除当前我的频道接口,添加我的频道接口
import { allChannels, delCurChannel, addChannel } from "@/api/channels.js";
export default {
  props: {
    channels: {
      //父组件返回的我的频道列表
      type: Array
    },
    activeIndex: {
      type: Number
    }
  },
  data() {
    return {
      channelsList: [], //全部频道列表
      isShow: false, //关掉按钮的显示与隐藏
      editShow: true //编辑按钮的显示
    };
  },
  computed: {
    //在这里实现可选频道的的计算  因为computed可以实时更新数据
    //可选频道列表 = 全部频道列表 - 我的频道列表
    selectChannel() {
      // const channelsList = this.channelsList;
      // const mychannels = this.channels;
      const result = this.channelsList.filter(item => {
        // 全部频道列表的每一项和我的频道列表的每一项比较
        // 如果相同不要，不同的留下
        const index = this.channels.findIndex(ele => {
          return item.id === ele.id;
        });
        // console.log(index);
        // console.log(this.channels);
        if (index === -1) {
          // 说明不相同
          return true;
        } else {
          return false;
        }
      });
      // console.log(result);
      return result;
    }
  },
  methods: {
    // 获取全部频道列表
    async getAllChannels() {
      try {
        const res = await allChannels();
        console.log(res, "全部频道列表");
        this.channelsList = res.data.data.channels;
      } catch (err) {
        console.log(err);
      }
    },
    // 点击编辑按钮
    edit() {
      // 控制关闭按钮的显示与隐藏
      this.isShow = !this.isShow;
      this.editShow = false;
    },
    // 点击完成按钮
    editSuccess() {
      // 关闭x
      this.isShow = false;
      // 显示编辑按钮
      this.editShow = true;
    },
    // 点击我的频道的一个，关闭我的频道，让父组件的对应频道高亮
    selectMyChannel(channelIndex) {
      // 调用父组件方法
      this.$emit("aList", channelIndex);
      // 关闭弹框
    },
    // 删除当前我的频道
    async delChannel(curIndex) {
      // 调接口删除后端对应的数据
      try {
        //推荐频道不能删除
        if (curIndex !== 0) {
          const res = await delCurChannel(curIndex);
          console.log(res);
          // 删除本地我的频道的对应数据
          this.channels.splice(curIndex, 1);
        }
      } catch (err) {
        console.log(err);
        this.$toast.fail("删除失败");
      }
    },
    // 点击可选频道，添加到我的频道
    async addMyChannel(curChannel) {
      // 把点击的当前频道添加到我的频道
      let totalChannel = [...this.channels, curChannel];
      // 调接口把后端数据进行更改
      // 处理后端需要的参数
      let newChannel = [];
      totalChannel.forEach((item, index) => {
        newChannel.push({
          id: item.id,
          seq: index
        });
      });
      // 删除推荐
      newChannel.splice(0, 1);
      try {
        const res = await addChannel(newChannel);
        console.log(res);
        // 因为computed已经做了所有频道和我的频道以及可选频道的计算，当更改其中一个，就会立马更新
        // 只需要把当前选中的频道直接添加进去就可以了
        this.channels.push(curChannel);
      } catch (err) {
        console.log(err);
      }
    }
  },
  mounted() {
    this.getAllChannels();
  }
};
</script>
<style lang="less" scoped>
.channel-list {
  /deep/.van-grid-item__text {
    font-size: 14px;
    color: #000;
  }
  .select {
    margin-top: 10px;
  }
  .mychannel {
    font-size: 14px;
  }
  .icon {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    background-color: #cccccc;
    color: #ffffff;
  }
  .van-button--small {
    width: 60px;
    height: 25px;
  }
  .active {
    color: red;
  }
}
</style>
